<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div {
    margin: 50px auto;
    width: 1200px;
    height: 800px;

  }

  input {
    width: 300px;
    line-height: 45px;
  }

  button {
    width: 100px;
    line-height: 45px;
    margin-left: 20px;
  }

  span {
    display: inline-block;
    margin-top: 50px;
  }
</style>

<body>

  <div>
    <input type="text"> <button class="btn">多个</button> <button class="btn1">一个</button>
    <button class="btn2">块级</button> <button class="btn3">rem</button>


    <br>
    <span></span>
  </div>
  <script>
    let input = document.querySelector('input')
    let btn = document.querySelector('.btn');
    let btn1 = document.querySelector('.btn1');
    let btn2 = document.querySelector('.btn2');
    let btn3 = document.querySelector('.btn3');
    let span = document.querySelector('span');

    btn.onclick = function () {
      let value = input.value.trim();
      let item = null;
      let arr = value.split(';')
      arr.pop()
      let str = ''
      arr.forEach((v, i) => {
        item = v.split(':');
        if (/\d+px$/.test(item[1])) {
          item[1] = parseInt(item[1]) * 2 + 'rpx';
        }
        str += `<li>${item.join(':')};</li>`
      })
      span.innerHTML = `<ul>${str} </ul> `
    }
    btn1.onclick = function () {
      let value = input.value.trim();
      span.innerHTML = parseInt(value) * 2 + 'rpx';
    }

    btn2.onclick = function () {
      let value = input.value.trim();
      value = JSON.stringify(value).replace(/(\d+px)/g, function (k, y) {
        return parseInt(k) * 2 + 'rpx'
      });
      span.innerHTML = JSON.parse(value);
    }

    btn3.onclick = function () {
      let value = input.value.trim();
      value = JSON.stringify(value).replace(/(\d+px)/g, function (k, y) {
        return parseInt(k) * 0.065.toFixed(3) + "rem";
      });
      span.innerHTML = JSON.parse(value);
    }


//     var content = '23px'

// content = content.replace(/(\d+)px/g, function(s, t) {
//     s = s.replace('px', '');
//     var value = parseInt(s) * 0.001; // 100px = 1rem
//     return value + "rem"; //0.23rem
// }); 
    // let obj = {
    //     width: 100 %;
    //     display: flex;
    //     justify - content: space - between;
    //   bottom: 240rpx;
    //   margin - left: 20rpx;
    //   margin - top: 20rpx;
    // }
  </script>
</body>

</html>